<nz-layout>
    <nz-sider #sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
        <div class="img">
            <nz-avatar #headPhoto nzIcon="user" nzSize="large" nzSrc="../assets/imgs/5.jpg" [ngStyle]="currentStyles"></nz-avatar>
        </div>
        <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
            <li nz-submenu>
                <span title><i class="anticon anticon-user"></i><span class="nav-text">User</span></span>
                <ul>
                    <li nz-menu-item>{{test}}</li>
                    <li nz-menu-item>Bill</li>
                    <li nz-menu-item>Alex</li>
                </ul>
            </li>
            <li nz-submenu>
                <span title><i class="anticon anticon-team"></i><span class="nav-text">Team</span></span>
                <ul>
                    <li nz-menu-item>Team 1</li>
                    <li nz-menu-item>Team 2</li>
                </ul>
            </li>
            <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span>
            </li>
        </ul>
    </nz-sider>
    <nz-layout>
        <nz-header style="background: #fff; padding:0;">
            <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="updateMarginLeft(sider,headPhoto)"></i>
            <ul *ngIf="!currentUser?.userName" nz-menu [nzMode]="'horizontal'" style="line-height: 64px;" class="nav-right">
                <li nz-menu-item routerLinkActive="active" routerLink="register">注册</li>
                <li nz-menu-item routerLinkActive="active" routerLink="login">登录</li>
            </ul>
            <ul *ngIf="currentUser?.userName" nz-menu [nzMode]="'horizontal'" style="line-height: 64px;" class="nav-right">
                <li nz-menu-item routerLinkActive="active">欢迎：{{currentUser?.userName}}</li>
                <li nz-menu-item (click)="logout()">退出</li>
            </ul>
        </nz-header>
        <!-- 主体内容区域 -->
        <nz-content style="margin:0 16px;">
            <nz-breadcrumb style="margin:12px 0;">
                <nz-breadcrumb-item>User</nz-breadcrumb-item>
                <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
            </nz-breadcrumb>
            <div style="padding:24px; background: #fff; min-height: 720px;">
                <router-outlet></router-outlet>
            </div>
        </nz-content>
        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
    </nz-layout>
</nz-layout>